<div class="container">
  <div class="navbar-search">
    <div class="example-input mr20">
      <nz-input-group [nzSuffix]="suffixTemplate" nzSize="default">
        <input nz-input placeholder="单位名称" [(ngModel)]="params.name" (change)="onSearch()" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i class="iconfont" [ngClass]="params.name.length > 0 ? 'icon-close-circle-line' : ''"
          style="font-size: 10px; color: #ddd;" (click)="clear()"></i>
      </ng-template>
    </div>
    <nz-select nzShowSearch nzAllowClear nzPlaceHolder="状态" [(ngModel)]="params.status" (ngModelChange)="onSearch()">
      <nz-option nzLabel="正常" nzValue="0"></nz-option>
      <nz-option nzLabel="禁用" nzValue="1"></nz-option>
    </nz-select>
    <div class="spacer"></div>
    <button nz-button class="fr" [nzType]="'primary'" (click)="addEditData(0)">
      <i class="iconfont icon-add-line"></i>
      新增客户</button>
  </div>

  <div class="view-module-container table-wrapper" style="position: relative;">
    <nz-table #fixedTable [nzData]="listOfData" [nzLoading]="loading" [nzTotal]="total"
      [(nzPageIndex)]="params.pageIndex" [(nzPageSize)]="params.countOfPage" [nzShowQuickJumper]="true"
      nzShowSizeChanger (nzPageIndexChange)="changePageIndex($event)" (nzPageSizeChange)="changePageSize($event)"
      [nzScroll]="{x: '1000px',y:'65vh'}" [nzPageSizeOptions]="[10,20,30,40]" [nzFrontPagination]="false">
      <thead>
        <tr>
          <th nzWidth="100px" nzLeft="0px" [nzAlign]="'center'"> 序号</th>
          <th nzWidth="200px">名称</th>
          <th nzWidth="200px">类型</th>
          <th nzWidth="250px">行业</th>
          <th nzWidth="250px">上游</th>
          <th nzWidth="250px">下游</th>
          <th nzWidth="200px" *ngIf="!flag">有效期</th>
          <th nzWidth="200px" *ngIf="!flag">资费</th>
          <th nzWidth="300px" nzBreakWord>特别说明</th>

          <th [nzAlign]="'center'" nzWidth="400px" nzRight="0px">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of fixedTable.data; let i=index">
          <td nzLeft="0px" [nzAlign]="'center'">{{i+1}}</td>
          <td>{{item.name}}</td>
          <td></td>
          <td>{{item.industry}}</td>
          <td>{{item.upstreamIndustry}}</td>
          <td>{{item.downstreamIndustry}}</td>
          <td *ngIf="!flag">{{item.postageTimeBegin | date:'yyyy-MM-dd'}} ~ {{item.postageTimeEnd | date:'yyyy-MM-dd'}}
          </td>
          <td *ngIf="!flag">{{item.postage}}</td>
          <td>{{item.specialNote}}</td>
          <!-- <td>
            <ng-container *ngIf="item.status == 1;else enableTpl">
              <nz-badge nzStatus="error" nzText="禁用"></nz-badge>
            </ng-container>
            <ng-template #enableTpl>
              <nz-badge nzStatus="success" nzText="启用"></nz-badge>
            </ng-template>
          </td> -->
          <td [nzAlign]="'center'" nzRight="0px">
            <a nz-button nzType="link" (click)="configSystem(item)">详情</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-button nzType="link" (click)="addEditData(item.id)">编辑</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-button nzType="link" (click)="clickStatus(item)">{{item.status == 0 ? '禁用' : '启用'}}</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-button nzType="link" (click)="configSystem(item)">预览</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-button nzDanger nzType="link" (click)="delListItem(item.id, item.name, i)">删除</a>
          </td>
        </tr>

      </tbody>
      <div class="total" style="position: absolute;bottom: -45px; ">共 <span style="color: blue;">{{total}}</span>
        条</div>
    </nz-table>

  </div>



</div>